<template>
    <el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="auto" style="max-width: 100%">
    <el-form-item>
      <el-button type="danger" @click="submitForm(ruleFormRef)">+ 新增</el-button>
      <el-button type="danger" disabled>保存</el-button>
      <el-button type="danger" disabled>撤销</el-button>
      <el-button type="danger" disabled>删除</el-button>
    </el-form-item><hr /><br />
    <div style="font-size: 20px; font-weight: bolder">基本信息</div><hr /><br />
    <table>
      <tr>
        <td>
          <el-form-item label="耳号" prop="earNumber" clearable>
            <el-input v-model="form.earNumber" placeholder="请输入耳号" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="电子耳标号" prop="electronicearlabel" clearable>
            <el-input v-model="form.electronicearlabel" placeholder="请输入电子耳标号"/>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="父亲耳号" prop="fatherEarNumber">
            <el-select v-model="form.fatherEarNumber" placeholder="请选择父亲耳号" style="width: 180px">
              <el-option v-for="item in getbasic.filter((x:any)=>x.gender==1)" :key="item.basicInforId" :label="item.earNumber" :value="item.earNumber"/>
            </el-select>
          </el-form-item>
        </td>

      </tr>
      <tr>
        <td>
          <el-form-item label="母亲耳号" prop="motherEarNumber">
            <el-select v-model="form.motherEarNumber" placeholder="请选择母亲耳号" style="width: 180px">
              <el-option v-for="item in getbasic.filter((x:any)=>x.gender==2)" :key="item.basicInforId" :label="item.earNumber" :value="item.earNumber"/>
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="品种" prop="varietiesId" clearable>
            <el-select v-model="form.varietiesId" placeholder="请选择品种" style="width: 180px">
              <el-option v-for="item in varieties" :key="item" :label="item.varietiesName" :value="item.varietiesId"/>
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择性别" style="width: 180px">
              <el-option label="公" :value="1" />
              <el-option label="母" :value="2" />
            </el-select>
          </el-form-item>
        </td>

      </tr>
      <tr>
        <td>
          <el-form-item label="出生状态" prop="birthStatus">
            <el-select v-model="form.birthStatus" placeholder="请选择出生状态" style="width: 180px">
              <el-option v-for="item in birthStatusList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker v-model="form.birthDate" type="date" placeholder="请选择出生日期" style="width: 100%"/>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="入场日期" prop="entryDate">
            <el-date-picker v-model="form.entryDate" type="date" placeholder="请选择入场日期" style="width: 100%"/>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="出生场地" prop="birthplace">
            <el-input v-model="form.birthplace" placeholder="请输入出生场地" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="出生体重(公斤)" prop="birthWeight">
            <el-input v-model="form.birthWeight" placeholder="请输入出生体重" />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="基因等级" prop="geneticlevelEnums" clearable>
            <el-select v-model="form.geneticlevelEnums" placeholder="请选择基因等级" style="width: 180px">
                <el-option v-for="item in geneticlevelList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注信息"/>
          </el-form-item>
        </td>
      </tr>
    </table>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox, formMetaProps } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
const route = useRoute();

// do not use same name with ref
const form = reactive({
  basicInforId: 0, //基本信息ID
  earNumber: "", //耳号
  electronicearlabel: "", //电子耳标号
  geneticlevelEnums: "", //基因等级(枚举)
  gender: '', //性别
  varietiesId: "", //品种ID
  fatherEarNumber: "", //父亲耳号
  motherEarNumber: "", //母亲耳号
  birthDate: "", //出生日期
  entryDate: "", //入场日期
  birthplace: "", //出生场地
  birthWeight: "", //出生重量
  remarks: "", //备注
  birthStatus: "", //出生状态(枚举)
  pigTypeId: route.query.pigType, //猪只类型id
  bedroomId: 0,//栋舍ID
  fieldId: 0,//栏位ID
  presentstatus: 1,//在场状态(枚举)
  reproductivestatus: 1,//繁殖状态(枚举)
  productiongrade: 1,//生产等级(枚举)
  saleslevel: 1,//销售等级(枚举)
  isPregnancyexam: 1//是否妊检
});

const ruleFormRef = ref<FormInstance>();
//验证
const rules = reactive<FormRules>({
  earNumber: [{ required: true, message: "请输入耳号", trigger: "blur" }],
  varietiesId: [{ required: true, message: "请选择品种", trigger: "change" }],
  electronicearlabel: [
    { required: true, message: "请输入电子耳标号", trigger: "blur" },
  ],
  geneticlevelEnums: [
    { required: true, message: "请选择基因等级", trigger: "change" },
  ],
  birthDate: [{ required: true, message: "请选择出生日期", trigger: "change" }],
  entryDate: [{ required: true, message: "请选择入场日期", trigger: "change" }],
  birthplace: [{ required: true, message: "请输入出生场地", trigger: "blur" }],
  birthWeight: [{ required: true, message: "请输入出生体重", trigger: "blur" }],
  remarks: [{ required: true, message: "请输入备注信息", trigger: "blur" }],
});
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(form);
      axios
        .post(apiBedinUrl+"/api/Basics/AddBasic", form)
        .then((res) => {
          console.log("基本信息", res.data);
          if (res.data.code == 0) {
            ElMessage.success("添加成功");
          } else {
            ElMessage.error("添加失败");
          }
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
//显示
const getbasic = ref([]);
const getData = () => {
  axios.post(apiBedinUrl+"/api/Basics/SearchBasic", {}).then((res) => {
    console.log("基本信息显示", res.data);
    getbasic.value = res.data.data;
  });
};

//-------------------------------下拉框
//品种
const varieties = ref([]);
const getVarieties = () => {
  axios
    .post(apiBedinUrl+"/api/Basics/SearchVarieties", {})
    .then((res) => {
      console.log("品种", res.data.data);
      varieties.value = res.data.data;
    });
};

//猪只类型
const pigtype = ref([]);
const getPigtype = () => {
  axios
    .post(apiBedinUrl+"/api/Basics/SearchPigType", {})
    .then((res) => {
      console.log("猪只类型", res.data.data);
      pigtype.value = res.data.data;
    });
};

//出生状态
const birthStatusList = ref([]);
const handlebirthStatus = () => {
  axios.get(apiBedinUrl+"/api/Enums/GetBirthStatus")
    .then((res) => {
      console.log("出生状态", res.data);
      birthStatusList.value = res.data;
    });
};

//基因等级
const geneticlevelList = ref([]);
const handlegeneticlevel = () => {
  axios.get(apiBedinUrl+"/api/Enums/GetGeneticlevel")
    .then((res) => {
      console.log("基因等级", res.data);
      geneticlevelList.value = res.data;
    });
};

//创建生命周期钩子
onMounted(() => {
  getVarieties();//品种类型
  getPigtype();//猪只类型
  handlebirthStatus();//出生状态
  handlegeneticlevel();//基因等级
  getData();
});
</script>

